import React, { Component, } from 'react'
import "./index.css"

//创建上下文对象
const MyContext = React.createContext()


export default class A extends Component {
  state = { username: 'Tom', age: 27 }
  render() {
    const { username, age } = this.state
    return (
      <div className='a'>
        <h1>我是A组件,我的名:{username}</h1>
        <MyContext.Provider value={{ username, age }}>
          {/* <B children={<C />} /> */}
          <B render={(age) => <C age={age} />} />
          {/* <B >
            <C />
          </B> */}
        </MyContext.Provider>
      </div>
    )
  }
}

class B extends Component {
  state = { age: 27 }
  render() {
    console.log(this)
    return (
      <div className='b'>
        <h2>我是B组件</h2>
        {this.props.render(this.state.age)}
      </div>
    )
  }
}
// class C extends Component {
//   // 声明接收context
//   static contextType = MyContext
//   render() {
//     console.log(this)
//     return (
//       <div className='c'>
//         <h3>我是C组件,接收到的名:{this.context.username}</h3>
//       </div>
//     )
//   }
// }

function C({ age }) {
  return (

    <div className='c'>
      <h3>我是C组件,接收到的名:
        <MyContext.Consumer>
          {value => {
            return `${value.username}年龄是:${age}`
          }}
        </MyContext.Consumer>
      </h3>
    </div>
  )
}